<template>
  <!-- 邀请好友 -->
  <div class="invite">
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="select" />
    <div class="top">
      <img src="@/assets/img/icons/black/back.svg" class="back" @click="$router.back()" />
      <div class="title">邀请好友</div>
      <div class="placeorder"></div>
    </div>
    <k-scroll class="scroll" topColor="#E99D42" bottomColor="#E99D42" topType="stretch" bottomType="stretch">
      <div class="content">
        <div class="invite-code" @click="copy">
          <div class="invite-title">我的邀请码</div>
          <div class="code">{{ code }}</div>
        </div>
        <img id="download" class="qr-code" :src="qrcode" />
        <div class="tips">
          <div class="item">永远免费</div>
          <div class="line-h">|</div>
          <div class="item">海量小说</div>
          <div class="line-h">|</div>
          <div class="item">天天连载</div>
        </div>
        <div class="btn-box">
          <k-button class="btn-left" bgColor="#FFBF6B" fontColor="#FEFEFE" fontSize="0.16rem" @click="btnClick(1)">保存二维码 </k-button>
          <k-button class="btn-right" bgColor="#FCCA00 " fontColor="#FEFEFE" fontSize="0.16rem" @click="btnClick(2)">分享 </k-button>
        </div>
        <div class="bottom-tip">邀请1名好友2人都可免广告！</div>
      </div>
    </k-scroll>
  </div>
</template>

<script>
import * as imageConversion from 'image-conversion'
export default {
  name: 'invite',
  data() {
    return {
      //用户邀请码
      code: this.$store.state.userInfo.invitecode,
      //APP下载二维码地址
      qrcode: require('@/assets/img/other/qrcode.png'),
      //APP下载地址
      downloadurl: 'xxxxxxxxx',
      //是否显示分享
      showShare: false,
      //分享数据列表
      options: [
        [
          {
            name: '微信',
            icon: 'wechat',
          },
          {
            name: '朋友圈',
            icon: 'wechat-moments',
          },
          {
            name: '微博',
            icon: 'weibo',
          },
          {
            name: 'QQ',
            icon: 'qq',
          },
        ],
        [
          {
            name: '复制链接',
            icon: 'link',
          },
          {
            name: '分享海报',
            icon: 'poster',
          },
          {
            name: '二维码',
            icon: 'qrcode',
          },
          {
            name: '小程序码',
            icon: 'weapp-qrcode',
          },
        ],
      ],
    }
  },
  methods: {
    //选择完成
    select(e) {
      console.log(e.name)
      if (e.name == '二维码') {
        //保存二维码
      }
      if (e.name == '复制链接') {
        //复制下载链接
        const text = document.createElement('textarea')
        text.value = this.downloadurl
        document.body.appendChild(text)
        text.select()
        document.execCommand('Copy')
        text.remove()
        this.$dialog({
          message: '链接复制成功!',
        })
      }
    },
    //复制我的邀请码
    copy() {
      const text = document.createElement('textarea')
      text.value = this.code
      document.body.appendChild(text)
      text.select()
      document.execCommand('Copy')
      text.remove()
      this.$dialog({
        message: '邀请码复制成功!',
      })
    },
    //按钮被点击
    btnClick(index) {
      if (index == 1) {
        //保存二维码到手机本地相册
        const xhr = new XMLHttpRequest()
        xhr.open('get', document.getElementById('download').src)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          // 返回文件流，进行下载处理
          console.log(xhr.response)
          imageConversion.downloadFile(xhr.response, '二维码.png')
        }
        xhr.send() // 不要忘记发送
      }
      if (index == 2) {
        //调起分享框
        this.showShare = true
      }
    },
  },
}
</script>

<style scoped src="./index.css"></style>
